<template>
    <div class="flex justify-between">
        <el-aside width="240px" class="article-aside">
            <el-card class="layout-table-card h-[100%] !border-none" shadow="never">
                <el-tree ref="cateTreeRef" class="cate-tree-box" node-key="id" :data="cateDate.tableList"
                    :default-checked-keys="cateDate.checkKeys" :current-node-key="state.queryParams.cate_id"
                    :props="{ label: 'name' }" default-expand-all :highlight-current="true"
                    :expand-on-click-node="false" @node-click="cateClick"></el-tree>
            </el-card>
        </el-aside>
        <el-main class="!p-[20px]" v-loading="state.loading">
            <ArticleList :list="state.tableList" />
            <div class="flex justify-center align-middle pt-[10px]" v-if="state.tableList.length > 0">
                <pagination v-model="state" @tableChange="getTableList" />
            </div>
        </el-main>
    </div>
</template>
<script lang="ts" setup>
import { articleList } from "@/api/cms/article";
import { usePage } from "@/composables/usePage";
import { cateList } from "@/api/cms/cate";

const route = useRoute();

// 定义列表
const state = reactive({
    loading: false,
    tableList: [],
    queryParams: {
        title: "",
        cate_id: "",
    },
    tableParams: {
        page_num: 1,
        page_limit: 6,
        page_total: 0 as any,
    },
});

// 定义栏目
const cateDate = reactive({
    checkKeys: [],
    tableList: [],
    queryParams: {
        name: "",
    },
});

const cateTreeRef = ref(null);

// 栏目列表
const getCateList = async () => {
    const item: any[] = [
        {
            id: "",
            name: "全部",
        },
    ];

    cateDate.tableList = await cateList(cateDate.queryParams);
    cateDate.tableList.unshift(...item);

    nextTick(() => {
        if (route.query?.cid) {
            unref(cateTreeRef).setCurrentKey(route.query.cid)
            unref(cateTreeRef).setCheckedKeys([route.query.cid])
        } else {
            unref(cateTreeRef).setCurrentKey("")
            unref(cateTreeRef).setCheckedKeys([]) 
        }
    });
};

// 点击栏目
const cateClick = (data) => {
    state.queryParams.cate_id = data.id;
    state.tableParams.page_num = 1;
    getTableList();
};

const { getTableList, searchTable, resetQuery } = usePage({
    tableData: state,
    apiData: articleList,
});

onMounted(() => {
    if (route.query?.cid) {
        state.queryParams.cate_id = route.query.cid as any;
    } else {
        state.queryParams.cate_id = "";
    }
    getTableList();
    getCateList();
});
</script>
<style lang="scss" scoped>
.article-aside {
    border-right: 1px solid #f5f5f5;
}
</style>
<style lang="scss">
.cate-tree-box .el-tree-node__content {
    height: 50px;
}
</style>
